<template>
    <div style="width:100%;height:100%"></div>
</template>

<script>
import { getBugRate } from "../../../../service/workbenchApi";

export default {
    data() {
        return {
            bugNum: [],
            oneBugNum: [],
            myChart3: null
        };
    },
    methods: {
        getData() {
            getBugRate().then(res => {
                if (res.code == 0) {
                    let data=res.data;
                    let dataName = Object.keys(data);
                    let oneBugRate = [], bugRate = [];
                    dataName.forEach(item=>{
                        oneBugRate.push(data[item].oneBugRate);
                        bugRate.push(data[item].bugRate);
                    })
                    this.myChart3.setOption({
                        xAxis: {
                            data: dataName
                        },
                        series: [ { data: bugRate}, { data: oneBugRate}]
                    });
                }
            });
        },
        drawBar3() {
            // 基于准备好的dom，初始化$echarts实例
            var myChart3 = this.$echarts.init(
                document.querySelector(".bug .bar3")
            );
            this.myChart3 = myChart3;
            myChart3.setOption({
                backgroundColor: "#FFFFFF",
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    },

                    formatter: function(params) {
                        let result = params[0].name + "<br>";
                        params.forEach(item => {
                            if (item.value) {
                                result +=
                                    item.marker +
                                    " " +
                                    item.seriesName +
                                    " : " +
                                    item.value +
                                    "%</br>";
                            } else {
                                result +=
                                    item.marker +
                                    " " +
                                    item.seriesName +
                                    " :  - </br>";
                            }
                        });
                        return result;
                    }
                },
                legend: {
                    data: ["Bug率", "一级Bug率"],
                    orient: "vertical", //垂直显示
                    y: "top", //延Y轴朝上
                    x: "right", //居右显示
                    textStyle: {
                        color: "#8F9399"
                    },
                    itemWidth: 10,
                    itemHeight: 10
                },
                grid: {
                    left: "0%",
                    top: "10%",
                    right: "25%",
                    bottom: "4%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        data: [], // dataName

                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#EDEDED",
                                width: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#8F9399"
                            },
                            formatter: item => {
                                return item;
                                // return item.substring(0,item.length - 3) + "\n职能组";
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLabel: {
                            textStyle: {
                                color: "#8F9399"
                            },
                            formatter: "{value}%"
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#EDEDED",
                                width: 1
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#EDEDED"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: "Bug率",
                        type: "bar",
                        data: [],
                        barWidth: 5,
                        barGap: 1,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 20,
                                color: "#E9B11B",
                                opacity: 1
                            }
                        }
                    },
                    {
                        name: "一级Bug率",
                        type: "bar",
                        data: [],
                        barWidth: 5, //柱子宽度
                        barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                barBorderRadius: 20,
                                color: "#F56B6B",
                                opacity: 1
                            }
                        }
                    }
                ]
            });
            window.addEventListener("resize", function() {
                myChart3.resize();
            });
        }
    },
    mounted() {
        this.drawBar3();
        this.getData();
    }
};
</script>

<style lang="scss" scoped></style>
